<template>
  <div class="security-screen">
    <h2 class="cyber-title">安防大屏</h2>
    <div class="monitor-wall">
      <div class="camera-view" v-for="n in 9" :key="n">
        <div class="camera-label">监控点 {{ n }}</div>
        <div class="video-feed"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.security-screen {
  background: #000;
  height: 100vh;
  padding: 20px;
}

.monitor-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: calc(100vh - 80px);
}

.camera-view {
  background: rgba(16, 22, 45, 0.8);
  border: 2px solid #409EFF;
  border-radius: 8px;
  overflow: hidden;
}

.video-feed {
  height: 300px;
  background: linear-gradient(45deg, #1a1f38, #2d3255);
}
</style> 